Step 1 of 3: Creating the C1TileView Application

In this step we create a WPF application using TileView for WPF and Silverlight. When you add a C1TileView control (or C1TileView in Silverlight) to your application, you have an interface that you can display content in. To set up your project and add a C1TileView control to your application, complete the following steps that are noted where they differ between WPF and Silverlight:

Create a new WPF or Silverlight project in Visual Studio. In this example the application is named "QuickStart."

Note: If you use a different project name, be sure to change references to "QuickStart" in later steps to the name of your project.

In the Solution Explorer, right-click the project name and choose Add Reference. In the Add Reference dialog box, locate and select the following assemblies and click OK to add the references to your project.
- C1.WPF or C1.Silverlight
- C1.WPF.TileView or C1.Silverlight.TileView
In the MainWindow.xaml or MainPage.xaml file, open the XAML view; in this quick start we add the C1TileView control using XAML markup.

Add the XAML namespace to the Window or UserControl class with the following markup:

XAML	Copy Code
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

so that the WPF Window class (or UserControl in Silverlight) appears similar to the following:

In the WPF MainWindow.xaml file

WPF XAML	Copy Code
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="ComponentOne TileView for WPF and Silverlight" Height="275" Width="425">

WPF XAML

Copy Code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    Title="ComponentOne TileView for WPF and Silverlight" Height="275" Width="425">

In the Silverlight MainPage.xaml file

Silverlight XAML	Copy Code
<UserControl x:Class="C1SilverlightCS111010.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" mc:Ignorable="d" d:DesignHeight="262" d:DesignWidth="399">

Silverlight XAML

Copy Code

<UserControl x:Class="C1SilverlightCS111010.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    mc:Ignorable="d" 
    d:DesignHeight="262" 
    d:DesignWidth="399">

This is a unified namespace that enables you to work with most ComponentOne WPF or Silverlight controls without adding multiple namespaces.

Add the <c1:C1TileView x:Name="C1TileView1" /> tag within the Grid element on the page to add the C1TileView control to the application.
The XAML appears similar to the following:

XAML	Copy Code
<Grid> <c1:C1TileView x:Name="C1TileView1"></c1:C1TileView> </Grid>

This adds a C1TileView control named "C1TileView1" to the application.

This sets up your application's user interface, but if you run your application now, the C1TileView control contains no content. In the next steps we add content to the C1TileView control, and then observe some of the run-time interactions possible with the control.